<template>
    <div class="header">
        <!-- 第一行 -->
        <div class="header-first clearFix">
            <!-- 用户头像 默认显示为app图标 -->
            <div class="user-img leftFix">
                <img src="../assets/logo.png" alt="logo" height="40" width="40">
            </div>

            <!-- 搜索框 -->
            <search-input class="leftFix" placeholder="搜你想搜的，虽然没啥用。。" hasIcon="true" 
            :getContent="getSearchInput"
            @keyup.enter="$store.dispatch('search', $store.state.searchInput)"
            />

            <!-- 其他 -->
            <div class="leftFix"></div>
        </div>
        
        <!-- 头部首页导航 -->
        <header-nav/>
    </div>
</template>

<script>
import HeaderNav from './HeaderNav.vue';
import SearchInput from './SearchInput.vue';

export default {
    name: 'BpHeader',
    components:{
        HeaderNav,
        SearchInput,
    },
    methods:{
        getSearchInput(value){
            this.$store.dispatch('getInput', value)
        }
    }
}
</script>

<style scoped>
.header {
    height: 90px;
    width: 100vw;
    padding: 5px;
    position: fixed;
    top: 0;
    left: 0;
}
.user-img {
    margin: 5px;
    height: 40px;
    width: 40px;
    border-radius: 40px;
    overflow: hidden;
}

</style>